

import "../../styles/MyHeader.css";
import "../../styles/MyEntry.css";
import "../../styles/MySwiper.css";
import '../../styles/MyKind/MyMind.css';
import HomList from '../../components/hom/HomList.jsx';
import img from "../../images/页面2 (2).jpg";
import { index_nav, index_goodlist } from "../../api/index";
import React, { Component } from 'react';
class Hom extends Component {
    constructor() {
        super();
        this.state = {
            list: [
            ],
            currentIndex: 0,
            list2: []
        }
    }
    componentDidMount() {
        index_nav().then((res) => {
            this.setState({ list: res.data.list })
        })
        index_goodlist().then((res) => {
            this.setState({ list2: res.data.list })
        })
    }
    onClickflag(index) {
        this.setState({
            currentIndex: index
        }, () => {
            console.log(this.state.currentIndex, index);
        })
    }
    tosearch(){
        this.props.history.push("/Search")
    }
    render() {
        return (
            <div className='home'>
                <div className="input-box">
                    <h1><img src={require('../../images/01-首页-快捷入口_02.jpg')} alt="" /></h1>
                    <div className='suos'>
                        <input type="text" placeholder="搜索商品" onClick={()=>{
                    this.tosearch()
                }}/>
                        <span><img className='img2' src={require('../../images/icon (2).jpg')} alt="" /></span>
                    </div>
                </div>
                <div className='swiper'>
                    <img src={require('../../images/swipt1.jpg')} alt="" />

                </div>
                <div className='list'>
                    <ul>
                        {
                            this.state.list.map((item, index) => {
                                return (
                                    // { `tab ${ this.state.currentIndex == index ? 'active' : '' }`
                                    <li className={`tab ${this.state.currentIndex === index ? 'active' : ''}`} key={item.sectionId}
                                        onClick={() => { this.onClickflag(index) }}>
                                        <img src={item.pic} alt="" />
                                        <p>{item.name}</p>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div className='skillpic'>
                    <div className='skill'>
                        <img src={img} alt="" />
                    </div>

                    {/* <ul className='picbox' >
                        {
                            this.state.list2.map((item, index) => {
                                return (
                                    <li key={index}>
                                        <img src={item.pic} alt="" />
                                        <p>{item.brand}</p>
                                        <p>原价:￥{item.salesPrice.value}</p>
                                        <p>抢购价：￥{item.gomoney}</p>
                                    </li>
                                )
                            })
                        }
                    </ul> */}
                    <HomList></HomList>
                </div>

            </div>
        );
    }
}

export default Hom;